<template>
  <div id="Backtop">
   
      <ul class="box1">
        <li>
          <div class="box2">
            <div class="el-icon-message"></div>
            <div>意见反馈</div>
          </div>

        </li>
        <li>
          <div class="box2">
            <div class="el-icon-warning-outline"></div>
            <div>帮助中心</div>
          </div>
        </li>
        <li>
          <div class="box2">
            <div class="el-icon-mobile"></div>
            <div>APP下载</div>
          </div>
        </li>
        <li>
          <div class="box2">
            <div class="el-icon-chat-dot-square"></div>
            <div>官方微信</div>
          </div>
        </li>
        <li class="up" v-if="scrollTop >200" @click="backTop">

            <div class="el-icon-arrow-up"></div>
            <!-- <div>官方微信</div> -->

        </li>
      </ul>
   

  </div>
</template>

<script>
export default {
    data() {
        return {
            scrollTop: 60
        }
    },

    mounted () {
        window.addEventListener('scroll', this.handleScroll, true)
    },

    destroyed () {
        // 离开该页面需要移除这个监听的事件，不然会报错
        window.removeEventListener('scroll', this.handleScroll)
    },



    methods: {
    // 滚动事件,绑定到元素div块
        // 保存滚动值，这是兼容的写法
        handleScroll (){
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        },
        // 滚动条回到顶部
        backTop (){
        if (this.scrollTop > 200) {
            let i = setInterval(()=>{
                document.documentElement.scrollTop = this.scrollTop
                document.documentElement.scrollTop -= this.scrollTop  /10;
                this.scrollTop = Math.floor(document.documentElement.scrollTop) 
                // console.log(this.scrollTop)
                if( this.scrollTop === 0){
                    clearInterval(i)
                }
            },20)

           
        }
        }
    }



}
</script>

<style>
@import url('../assets/css/shop/backtop.css');
</style>